<!-- 业务告警分析 -->
<template>
	<div class="ywgzt-container">
		<title-banner :title="queryDataInfo.titleName"></title-banner>
		<div class="content">
			<!-- 告警分布趋势图 -->
			<div class="alarm-chart-box">
				<div id="alarmTrendLine" class="alarm-line"></div>
			</div>

			<!-- 概况 -->
			<div class="overview-box-container">
				<div v-if="queryDataInfo.alarmIndicatorCode != 'BS_FAIL_RATE_30'" class="overview-box-head">
					<div>
						<span v-if="pageType == 1" class="overview-box-head-title">当前业务告警事件档案时间：</span>
						<span v-else class="overview-box-head-title">当前步骤/接口告警事件档案时间：</span>
						<span style="margin-left: 10px">{{ queryDataInfo.startTime + '-' + queryDataInfo.endTime }}</span>
					</div>
				</div>
				<div class="overview-box">
					<div v-for="(value, key) in detailInfo" :key="key" class="overview-item">
						<span class="overview-label">{{ key }}：</span>
						<span class="overview-value">{{ value }}</span>
					</div>
				</div>
			</div>

			<!-- 中间 -->
			<div class="content-c">
				<!-- 左-表格 -->
				<div class="c-table-box">
					<div class="analysis-table">
						<div class="table-title">
							<div class="circle"></div>
							<span v-if="pageType == 2">接口分析</span>
							<span v-else>步骤分析</span>
							<div class="table-export-btn">
								<el-button type="text" :loading="exportLoading.stepAnalysis" @click="handleStepExport">
									<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
								</el-button>
							</div>
						</div>
						<div v-if="pageType == 2">
							<!-- 接口分析 -->
							<Step4ApiTableList ref="setplistRef" :params="responseParams" @setpClick="setpClick"></Step4ApiTableList>
						</div>
						<div v-else>
							<!-- 步骤分析 -->
							<Step4HealthTableList
								v-if="queryData.alarmIndicatorCode == 'BS_FAIL_RATE_30' && tableShow"
								ref="setplistRef"
								:params="responseParams"
								@setpClick="setpClick"
							></Step4HealthTableList>

							<Step4FailTableList
								v-else-if="queryData.alarmIndicatorCode == 'BS_FAIL_RATE_10' && tableShow"
								ref="setplistRef"
								:params="responseParams"
								@setpClick="setpClick"
							></Step4FailTableList>
							<Step4TimeTableList
								v-else-if="queryData.alarmIndicatorCode == 'BS_FAIL_RATE_20' && tableShow"
								ref="setplistRef"
								:params="responseParams"
								@setpClick="setpClick"
							></Step4TimeTableList>
						</div>
					</div>
					<div class="statistics-table">
						<div class="table-title">
							<div class="circle"></div>
							告警分类统计
							<div class="table-export-btn">
								<el-button type="text" :loading="exportLoading.alarmClassify" @click="handleClassifyExport">
									<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
								</el-button>
							</div>
						</div>
						<alarmTableList v-if="tableShow" ref="alarmlistRef" :params="responseParams"></alarmTableList>
					</div>
				</div>
				<!-- 右-地图 -->
				<div class="c-map-box">
					<div class="table-title">
						<div class="circle"></div>
						区域分析
					</div>
					<div class="map-button-box">
						<el-button
							v-for="area in areaOptions"
							:key="area.areaId"
							class="toggle-button"
							:class="{ 'active-button': areaId == area.areaId }"
							@click="handleToggleArea(area.areaId)"
							>{{ area.name }}</el-button
						>
					</div>
					<div v-if="noMapData" style="text-align: center; padding-top: 40%">
						<svg-icon class-name="nodata" icon-class="nodata"></svg-icon>暂无数据~
					</div>
					<div id="map" class="map-chart"></div>
				</div>
			</div>
			<div class="affect-user-box">
				<div class="table-title">
					<div class="circle"></div>
					影响用户
					<div class="table-export-btn">
						<el-button type="text" :loading="exportLoading.affUser" @click="handleUserExport">
							<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
						</el-button>
					</div>
				</div>
				<div>
					<usersTableList v-if="tableShow" ref="userslistRef" :params="responseParams"></usersTableList>
				</div>
			</div>
			<div class="associate-analysis-box">
				<div class="analysis-title">关联分析</div>
				<div class="analysis-time-box">
					<span class="analysis-time-label">查询时间</span>
					<el-date-picker
						v-model="affectTimeRange"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						:clearable="false"
						class="date-picker"
						:disabled-date="disabledDate"
					></el-date-picker>
				</div>
				<div class="analysis-table-box">
					<div class="affect-table-box mr-10">
						<div class="table-title">
							<div class="circle"></div>
							影响系统
							<div class="table-export-btn">
								<el-button type="text" :loading="exportLoading.affSys" @click="handleSysExport">
									<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
								</el-button>
							</div>
						</div>
						<div>
							<sysTableList v-if="tableShow && setpShow" ref="syslistRef" :params="stepParams"></sysTableList>
						</div>
					</div>
					<div class="affect-table-box">
						<div class="table-title">
							<div class="circle"></div>
							影响业务
							<div class="table-export-btn">
								<el-button type="text" :loading="exportLoading.affBusi" @click="handleBusiExport">
									<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
								</el-button>
							</div>
						</div>
						<div class="recent-health-rate-business-container">
							<businesssTableList v-if="tableShow && setpShow" ref="businesssRef" :params="stepParams"></businesssTableList>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="BusinessAlarmAnalysis" lang="tsx">
import axios from 'axios';
import TitleBanner from '@/views/ops-workbench/components/TitleBanner/index.vue';
import * as echarts from 'echarts';
import Step4FailTableList from './stepList4Fail.vue';
import Step4TimeTableList from './stepList4Time.vue';
import Step4HealthTableList from './stepList4Health.vue';
import Step4ApiTableList from './stepList4Api.vue';
import AlarmTableList from './alarmList.vue';
import UsersTableList from './usersList.vue';
import SysTableList from './sysList.vue';
import BusinesssTableList from './businesssList.vue';
import {
	alarmDetail,
	getAlarmTrend,
	getAreaAnalysis,
	stepAnalysisDownLoad,
	alarmClassifyDownLoad,
	affectUserDownLoad,
	affectSystemDownLoad,
	affectBusinessDownLoad,
} from '@/api/ops-workbench/business-alarm-analysis/index';
import { getConfigKey } from '@/api/management/systemManage/systemConfig';
import { formatDate, downloadFromBlob } from '@/utils/common';
import { getLineStyle, getAreaStyle, getGeo, chartResize, fillCity } from '@/utils/ops-workbench/chartCommon';
import { ref, reactive, watch, onMounted, onActivated } from 'vue';
import { useRoute } from 'vue-router';
import useCurrentInstance from '@/utils/useCurrentInstance';

let route = useRoute();
let { proxy } = useCurrentInstance();

const setplistRef = ref(null);
const alarmlistRef = ref<any>();
const userslistRef = ref(null);

// 禁选日期
let disabledDate = (time: Date) => {
	return time.getTime() > Date.now();
};
// alarmIndicatorCode 观察类型(BS_FAIL_RATE_10:失败, BS_FAIL_RATE_20:响应慢, BS_FAIL_RATE_30:健康度低)	可以判断是健康度页面还是其他两个
// dataType 数据类型：1-业务，2-区域，3-步骤，4-接口，5-高频，6-經常，7-低频，8-零散	 业务告警事件档案分析  dataType: 5、6、7、8  共用步骤/接口告警事件档案分析 3、4

let pageType = ref<number>(); //1 业务告警事件档案分析 （即dataType: 5、6、7、8）；2 共用步骤/接口告警事件档案分析 3、4
let pagetitle = ref('');
let queryDataInfo = ref<anyObj>({});
let detailInfo = ref<anyObj>({}); //详情信息
let queryData = reactive<anyObj>({});
let newMaxAlarmTime = ref(''); // 最新告警时间
let newCycleTime = ref(''); // 当前告警时间
// 告警分布趋势图按钮参数
let alarmTrendOptions = reactive([
	{ trendId: '1', name: '响应耗时告警分布趋势图' },
	{ trendId: '2', name: '失败率告警分布趋势图' },
	{ trendId: '3', name: '健康度告警分布趋势图' },
]);
let trendId = ref('');
// 线图样式
let lineChartStyle = reactive(getLineStyle());
// 趋势图数据
let lineData: anyObj = {};
// 区域分析地图按钮参数
let areaOptions = reactive([
	{ areaId: '1', name: '响应慢访问区域分布' },
	{ areaId: '2', name: '失败访问区域分布' },
	{ areaId: '3', name: '告警访问区域分布' },
]);
let areaId = ref('');
// 图形对象
type ChartType = {
	map: any;
	alarmTrendLine: any;
};
let chart: ChartType = {
	map: null,
	alarmTrendLine: null,
};
let place = 'jiangxi';
// 地理位置数据
let geoCoordMap = {};
// 地图无数据
let noMapData = ref(false);
// 地图数据
let mapData: anyObj = {};
// 关联分析时间范围
let affectTimeRange = ref<any>([]);
// 告警总览时间范围
let responseParams = ref({});
// 关联分析的请求数据
let responseParams1 = ref({});
let tableShow = ref(false);
let setpShow = ref(true);
let stepParams = ref<anyObj>({});
let stepCodes = ref<any[]>([]);
let reloadFlag = ref(true);
// 导出按钮
let exportLoading = reactive({
	stepAnalysis: false,
	alarmClassify: false,
	affUser: false,
	affSys: false,
	affBusi: false,
});
// 导出参数
let exportParams: anyObj = {};
const syslistRef = ref<any>();
const businesssRef = ref<any>();

watch(affectTimeRange, (value) => {
	// 关联分析的查询时间
	stepParams.value.startTime = formatDate(value[0]);
	stepParams.value.endTime = formatDate(value[1]);
	if (businesssRef.value && reloadFlag.value) {
		// 初次跳转加载,时间值初始化但dom还未生成
		syslistRef.value.reloadList(responseParams.value); //重新加载 系统列表
		businesssRef.value.reloadList(responseParams.value); //重新加载 业务列表
	}
	reloadFlag.value = true;
});
onActivated(() => {
	queryData = { ...route.query };
	initParams();
	document.title = queryDataInfo.value.titleName;
	initTitle();
	getConfigKey('sys.project.map').then((response: ApiResponse) => {
		place = response.data;
		geoCoordMap = getGeo(place);
		// 初始化图表对象
		initCharts();
		// 请求折线图数据并渲染
		getAlarmLineData();
	});
});

// 初始化title
function initTitle() {
	const dataType = queryData.dataType; // 数据类型 1-业务，2-区域，3-步骤，4-接口，5-高频，6-經常，7-低频，8-零散
	const alarmIndicatorCode = queryData.alarmIndicatorCode; //观察类型 BS_FAIL_RATE_10:失败, BS_FAIL_RATE_20:响应慢, BS_FAIL_RATE_30:健康度低
	if (dataType === '3' || dataType === '4') {
		pageType.value = 2;
		if (alarmIndicatorCode === 'BS_FAIL_RATE_10') {
			pagetitle.value = 'OA系统-申请业务-失败业务告警分析';
		} else {
			pagetitle.value = 'OA系统-申请业务-响应慢业务告警分析';
		}
	} else {
		pageType.value = 1;
		if (alarmIndicatorCode === 'BS_FAIL_RATE_10') {
			pagetitle.value = '失败共用步骤/接口告警分析';
		} else {
			pagetitle.value = '响应慢共用步骤/接口告警分析';
		}
	}
}

// 初始化请求参数
function initParams() {
	queryDataInfo.value = JSON.parse(JSON.stringify(queryData));
	trendId.value = queryDataInfo.value.trendId;
	areaId.value = queryDataInfo.value.areaId || '1';
	newCycleTime.value = queryDataInfo.value.cycleTime?.substring(0, 19);
	responseParams.value = queryData;
	responseParams1.value = queryData;
	affectTimeRange.value[0] = queryData.startTime;
	affectTimeRange.value[1] = queryData.endTime;
	getDetail(); //告警详情总览
}

//告警详情总览
function getDetail() {
	let params = {
		groupId: queryData.groupId,
		dataType: queryData.dataType,
		id: queryData.id,
		alarmIndicatorCode: queryData.alarmIndicatorCode,
		systemId: queryData.systemId,
		businessCode: queryData.businessCode,
		stepCode: queryData.stepCode,
		startTime: queryData.startTime,
		endTime: queryData.endTime,
	};

	alarmDetail(params).then((res) => {
		formatDetailData(res.data);
		tableShow.value = true;
		// 请求地图数据并渲染(需要返回的接口数据当该请求的参数)
		getAreaData();
		reloadFlag.value = false;
	});
}
// 处理总览数据
function formatDetailData(object: anyObj) {
	let result = {};
	if (object instanceof Object === false) return;
	//
	if (queryData.alarmIndicatorCode === 'BS_FAIL_RATE_30') {
		// 健康度
		result = {
			系统名称: object.systemName,
			业务名称: object.businessName,
			健康度底告警次数: object.alarmNum,
			健康度: object.healthRate,
			总访问量: object.count,
			告警访问量: object.alarmCount,
			失败访问量: object.failCount,
			响应慢访问量: object.dealTimeAlarmCount,
		};
	} else if (queryData.alarmIndicatorCode === 'BS_FAIL_RATE_20') {
		// 响应慢
		// 健康度
		result = {
			系统名称: object.systemName,
			业务名称: object.businessName,
			响应慢告警次数: object.dealTimeAlarmCount,
			响应慢比例: object.dealTimeAlarmRate,
			总访问量: object.count,
			告警访问量: object.alarmCount,
			失败访问量: object.failCount,
			响应慢访问量: object.dealTimeAlarmCount,
		};
	} else if (queryData.alarmIndicatorCode === 'BS_FAIL_RATE_10') {
		// 失败
		// 健康度
		result = {
			系统名称: object.systemName,
			业务名称: object.businessName,
			失败告警次数: object.failCount,
			失败率: object.failRate,
			总访问量: object.count,
			告警访问量: object.alarmCount,
			失败访问量: object.failCount,
			响应慢访问量: object.dealTimeAlarmCount,
		};
	}
	detailInfo.value = result;
	console.log('detailInfo', detailInfo);
}

// 初始化图表
function initCharts() {
	chart.map = echarts.init(document.getElementById('map')!);
	chart.alarmTrendLine = echarts.init(document.getElementById('alarmTrendLine')!);
	let base = import.meta.env.VITE_APP_ASSETS_BASEURL;
	axios.get(`${base}/Echart/map/json/province/${place}.json`).then((res) => {
		echarts.registerMap(place, res.data);
	});
}
// 自适应图表大小
function handleChartResize() {
	chartResize(chart);
}
// 监听stepCode的值
function setpClick(val = []) {
	console.log('stepclic');
	stepCodes.value = val;
	stepParams.value = {
		...route.query,
		stepCodes: stepCodes.value,
		startTime: affectTimeRange.value[0],
		endTime: affectTimeRange.value[1],
	};
	syslistRef.value.reloadList(stepParams.value); //重新加载 系统列表
	businesssRef.value.reloadList(stepParams.value); //重新加载 业务列表
	setpShow.value = true;
}

// 切换告警分布趋势图
function handleToggleTrend(value: string) {
	trendId.value = value;
	renderLine();
}

// 请求告警分布趋势数据
function getAlarmLineData() {
	getAlarmTrend(queryDataInfo.value).then((res: ApiResponse) => {
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			return;
		}
		renderLine(res.data.detailList);
	});
}
// 渲染告警分布趋势图
function renderLine(valueArr: any = []) {
	let chartIns = chart.alarmTrendLine;
	chartIns.clear();
	if (valueArr.length <= 0) {
		chartIns.setOption(lineChartStyle.noDataOption);
		return;
	}

	let seriesData: any[] = [];
	let name1, name2; //y轴的标题
	const countData = valueArr.map((item: anyObj) => item.count); //访问量
	const alarmCountData = valueArr.map((item: anyObj) => item.alarmCount); //告警访问量
	const healthRateData = valueArr.map((item: anyObj) => item.healthRate); // 健康度
	const dealTimeAlarmRateData = valueArr.map((item: anyObj) => item.dealTimeAlarmRate); //响应慢比例
	const xData = valueArr.map((item: anyObj) => item.cycleTime?.substring(11, 16)); //所属周期
	switch (queryData.alarmIndicatorCode) {
		case 'BS_FAIL_RATE_10': //失败
			name1 = '健康度';
			name2 = '访问量';
			seriesData = [
				{
					name: '访问量',
					yAxisIndex: 1,
					data: countData,
					type: 'line',
					itemStyle: {
						color: 'rgb(30,199,154)',
					},
					areaStyle: getAreaStyle('rgb(30,199,154)').areaStyle,
				},
				{
					name: '失败访问量',
					yAxisIndex: 1,
					data: alarmCountData,
					type: 'line',
					itemStyle: {
						color: 'rgb(109,84,242)',
					},
					areaStyle: getAreaStyle('rgb(109,84,242)').areaStyle,
				},
				{
					name: '健康度',
					data: healthRateData,
					type: 'line',
					itemStyle: {
						color: 'rgb(74,152,255)',
					},
					areaStyle: getAreaStyle('rgb(74,152,255)').areaStyle,
				},
			];
			break;
		case 'BS_FAIL_RATE_20': //响应慢
			name1 = '响应慢比例、健康度';
			name2 = '访问量';
			seriesData = [
				{
					name: '访问量',
					yAxisIndex: 1,
					data: countData,
					type: 'line',
					itemStyle: {
						color: 'rgb(30,199,154)',
					},
					areaStyle: getAreaStyle('rgb(30,199,154)').areaStyle,
				},
				{
					name: '响应慢比例',
					data: dealTimeAlarmRateData,
					type: 'line',
					itemStyle: {
						color: 'rgb(109,84,242)',
					},
					areaStyle: getAreaStyle('rgb(109,84,242)').areaStyle,
				},
				{
					name: '健康度',
					data: healthRateData,
					type: 'line',
					itemStyle: {
						color: 'rgb(74,152,255)',
					},
					areaStyle: getAreaStyle('rgb(74,152,255)').areaStyle,
				},
			];
			break;
		case 'BS_FAIL_RATE_30': //健康度
			name1 = '响应慢比例';
			name2 = '访问量';
			seriesData = [
				{
					name: '响应慢比例',
					data: dealTimeAlarmRateData,
					type: 'line',
					itemStyle: {
						color: 'rgb(30,199,154)',
					},
					areaStyle: getAreaStyle('rgb(30,199,154)').areaStyle,
				},
				{
					name: '访问量',
					yAxisIndex: 1,
					data: countData,
					type: 'line',
					itemStyle: {
						color: 'rgb(109,84,242)',
					},
					areaStyle: getAreaStyle('rgb(109,84,242)').areaStyle,
				},
				{
					name: '告警访问量',
					yAxisIndex: 1,
					data: alarmCountData,
					type: 'line',
					itemStyle: {
						color: 'rgb(74,152,255)',
					},
					areaStyle: getAreaStyle('rgb(74,152,255)').areaStyle,
				},
			];
			break;
	}
	chartIns.setOption({
		textStyle: {
			color: '#ffffff',
		},
		// 图例
		legend: {
			show: true,
			left: '41%',
			top: '2%',
			textStyle: {
				color: '#ffffff',
			},
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
			formatter: function (a: anyObj) {
				let list = [],
					listItem = '';
				for (let i = 0; i < a.length; i++) {
					if (a[i].seriesName.indexOf('访问量') > -1) {
						list.push(
							'<i style="display:inline-block;width:10px;height:10px;background:' +
								a[i].color +
								';margin-right:5px;border-radius:50%;}"></i><span style="display:inline-block;">' +
								a[i].seriesName +
								'</span>：' +
								a[i].value
						);
					} else {
						list.push(
							'<i style="display:inline-block;width:10px;height:10px;background:' +
								a[i].color +
								';margin-right:5px;border-radius:50%;}"></i><span style="display:inline-block;">' +
								a[i].seriesName +
								'</span>：' +
								a[i].value +
								'%'
						);
					}
				}
				listItem = list.join('<br>');
				return '<div>' + a[0].axisValue + '</div>' + listItem;
			},
		},
		// 坐标系
		grid: {
			containLabel: true,
			x: 15,
			x2: 20,
			y: 45,
			y2: 10,
		},
		xAxis: {
			data: xData,
			...lineChartStyle.xAxisStyle,
		},
		yAxis: [
			{
				axisLine: {
					show: true,
					lineStyle: {
						color: '#ffffff',
					},
				},
				nameTextStyle: {
					padding: [20, 10, 10, 70],
				},
				name: name1,
			},
			{
				axisLine: {
					show: true,
					lineStyle: {
						color: '#ffffff',
					},
				},
				nameTextStyle: {
					padding: [20, 0, 10, 10],
				},
				name: name2,
			},
		],
		series: seriesData,
	});
	chartIns.on('click', (e: anyObj) => {
		if (lineData.idsArr[e.dataIndex] === null) {
			return;
		}
		// 改变页面所有相关查询的当前告警时间
		newCycleTime.value = lineData.cycleTimeArr[e.dataIndex];
		queryDataInfo.value.id = lineData.idsArr[e.dataIndex];

		// 改变相关参数
		queryDataInfo.value.startTime = newCycleTime.value;
		getDetail();
		// getAreaData();
		// 相关表格
		responseParams.value = {
			systemId: queryDataInfo.value.systemId,
			businessCode: queryDataInfo.value.businessCode,
			startTime: newCycleTime.value,
			// newCycleTime: queryDataInfo.startTime.substring(0, 19),
			endTime: newMaxAlarmTime.value,
			trendId: queryDataInfo.value.trendId,
			cycleTime: newCycleTime,
			systemName: detailInfo.value.systemName,
			businessName: detailInfo.value.businessName,
			alarmType: detailInfo.value.alarmType,
			startCycleTime: detailInfo.value.startCycleTime,
		};
		// 取消高亮别的点
		chartIns.dispatchAction({
			type: 'downplay',
		});
		// 高亮点击的点
		setTimeout(() => {
			chartIns.dispatchAction({
				type: 'highlight',
				seriesIndex: e.seriesIndex,
				dataIndex: e.dataIndex,
			});
		}, 500);
	});
}
// 切换区域分布按钮
function handleToggleArea(value: string) {
	areaId.value = value;
	pickMapData();
}
// 渲染相应类型的地图数据
function pickMapData() {
	if (JSON.stringify(mapData) === '{}') {
		return;
	}
	if (areaId.value === '1') {
		renderMap(mapData.responseArr);
	} else if (areaId.value === '2') {
		renderMap(mapData.failArr);
	} else if (areaId.value === '3') {
		renderMap(mapData.alarmArr);
	}
}
// 请求区域分布地图数据
function getAreaData() {
	getAreaAnalysis({
		groupId: queryDataInfo.value.groupId,
		dataType: queryDataInfo.value.dataType,
		businessCode: queryDataInfo.value.businessCode,
		startTime: queryDataInfo.value.startTime,
		endTime: queryDataInfo.value.endTime,
		stepCode: queryDataInfo.value.stepCode,
	}).then((res: ApiResponse) => {
		if (res.code !== 0) {
			// noMapData.value = true;
			proxy.$modal.msgWarning(res.msg);
			return;
		}
		fillCity(res.data || [], geoCoordMap);
		let responseArr: anyObj[] = [],
			failArr: anyObj[] = [],
			alarmArr: anyObj[] = [];
		if (res.data !== null && res.data !== undefined && res.data !== '') {
			noMapData.value = false;
			res.data.forEach((t: anyObj) => {
				// 响应慢
				if (t.dealTimeAlarmCount === undefined) {
					t.dealTimeAlarmCount = 0;
				}
				responseArr.push({
					name: t.areaName,
					value: t.dealTimeAlarmCount,
				});
				// 失败
				if (t.failCount === undefined) {
					t.failCount = 0;
				}
				failArr.push({
					name: t.areaName,
					value: t.failCount,
				});
				// 告警
				if (t.alarmCount === undefined) {
					t.alarmCount = 0;
				}
				alarmArr.push({
					name: t.areaName,
					value: t.alarmCount,
				});
			});
			mapData = {
				responseArr: responseArr,
				failArr: failArr,
				alarmArr: alarmArr,
			};
			pickMapData();
		} else {
			// noMapData.value = true;
			mapData = {};
		}
	});
}
// 渲染地图
function renderMap(mapData: any[]) {
	let convertData = function (data: anyObj) {
		let res = [];
		for (let i = 0; i < data.length; i++) {
			let geoCoord = geoCoordMap[data[i].name];
			if (geoCoord) {
				res.push({
					name: data[i].name,
					value: geoCoord.concat(data[i].value),
				});
			}
		}
		return res;
	};
	chart.map.setOption({
		tooltip: {
			trigger: 'item',
			formatter: function (params: anyObj) {
				if (params.value >= 0) {
					return params.name + '：' + params.value;
				} else {
					return params.name;
				}
			},
		},
		visualMap: {
			show: true,
			min: 0,
			max: 100,
			realtime: true, //拖拽时是否更新
			orient: 'horizontal', //展现方式
			left: '25%',
			itemWidth: 10,
			itemHeight: 211,
			calculable: true, //是否展示拖拽手柄
			color: ['#ef4b43', '#2a507d'],
			textStyle: {
				color: '#FFFFFF',
			},
		},
		geo: {
			map: place,
			roam: true,
			label: {
				show: true,
				textStyle: {
					// 城市字体颜色
					color: 'rgb(255, 255, 255)',
				},
			},

			itemStyle: {
				// 地图边线颜色
				borderColor: 'rgb(0, 255, 255)',
				// 边线宽度
				borderWidth: 1,
				// 地图底色
				color: '#2a507d',
			},
			// 高亮状态样式
			emphasis: {
				label: {
					color: 'rgb(255, 255, 255)',
				},
				itemStyle: {
					areaColor: 'rgba(255, 255, 255, 0.1)',
					shadowOffsetX: 0,
					shadowOffsetY: 0,
					shadowBlur: 20,
					borderWidth: 3,
					shadowColor: 'rgba(0, 0, 0, 0.5)',
					scale: true,
				},
			},
		},
		series: [
			{
				name: 1, //浮动框的标题
				type: 'map',
				geoIndex: 0,
				nameProperty: 'NAME',
				data: mapData,
			},
			{
				name: 'healthRateTip',
				type: 'scatter',
				coordinateSystem: 'geo',
				symbol: 'circle',
				symbolSize: [1, 1],
				tooltip: {
					show: false,
				},
				label: {
					show: true,
					textStyle: {
						color: '#ffffff',
						fontSize: 12,
					},
					position: 'bottom',
					formatter(value: anyObj) {
						if (value.data.value[2] !== '') {
							return value.data.value[2];
						} else {
							return '';
						}
					},
				},
				itemStyle: {
					color: '#fff',
				},
				// 展示对应城市的健康度数值
				data: convertData(mapData),
				showEffectOn: 'render',
				rippleEffect: {
					brushType: 'stroke',
				},
				// hoverAnimation: true,
				zlevel: 1,
			},
		],
	});
}
/** 导出 */
// 获取通用导出参数
function getExportParams() {
	exportParams = {};
	let alarmIndicatorCode = '',
		alarmIndicatorName = '';
	switch (queryData.alarmIndicatorCode) {
		case 'BS_FAIL_RATE_20':
			alarmIndicatorCode = 'BS_FAIL_RATE_20';
			alarmIndicatorName = '响应慢告警';
			break;
		case 'BS_FAIL_RATE_10':
			alarmIndicatorCode = 'BS_FAIL_RATE_10';
			alarmIndicatorName = '失败率高告警';
			break;
		case 'BS_FAIL_RATE_30':
			alarmIndicatorCode = 'BS_FAIL_RATE_30';
			alarmIndicatorName = '健康度低告警';
			break;
	}
	exportParams = {
		startTime: newCycleTime.value,
		alarmIndicatorCode: alarmIndicatorCode,
		alarmIndicatorName: alarmIndicatorName,
		systemId: detailInfo.value.systemId,
		systemName: detailInfo.value.systemName,
		businessCode: detailInfo.value.businessCode,
		businessName: detailInfo.value.businessName,
		alarmType: detailInfo.value.alarmType,
		startCycleTime: detailInfo.value.startCycleTime,
	};
}
// 步骤分析
function handleStepExport() {
	exportLoading.stepAnalysis = true;
	getExportParams();
	// let d = JSON.parse(JSON.stringify(exportParams));
	stepAnalysisDownLoad(queryDataInfo.value).then((res) => {
		downloadFromBlob(res, exportParams.alarmIndicatorName + '分析' + queryDataInfo.value.startTime.replace(/\D/g, '')).then((o) => {
			exportLoading.stepAnalysis = false;
			if (!o.flag) {
				proxy.$modal.msgWarning(o.msg);
			}
		});
	});
}
// 告警分类下载
function handleClassifyExport() {
	exportLoading.alarmClassify = true;
	let alarmIndicatorIdList = alarmlistRef.value.getAlarmTypeId();
	getExportParams();
	let d = JSON.parse(JSON.stringify(queryDataInfo.value));
	d.alarmIndicatorIdList = alarmIndicatorIdList;
	alarmClassifyDownLoad(d).then((res) => {
		downloadFromBlob(res, exportParams.alarmIndicatorName + '分析 - 告警分类统计' + d.startTime.replace(/\D/g, '')).then((o) => {
			exportLoading.alarmClassify = false;
			if (!o.flag) {
				proxy.$modal.msgWarning(o.msg);
			}
		});
	});
}
// 影响用户
function handleUserExport() {
	exportLoading.affUser = true;
	getExportParams();
	let d = JSON.parse(JSON.stringify(queryDataInfo.value));
	affectUserDownLoad(d).then((res) => {
		downloadFromBlob(res, '', exportParams.alarmIndicatorName + '分析 - 影响用户 ' + d.startTime.replace(/\D/g, '') + '.xlsx').then((o) => {
			exportLoading.affUser = false;
			if (!o.flag) {
				proxy.$modal.msgWarning(o.msg);
			}
		});
	});
}
// 影响系统
function handleSysExport() {
	exportLoading.affSys = true;
	getExportParams();
	let d = JSON.parse(JSON.stringify(queryDataInfo.value));
	d.startTime = formatDate(affectTimeRange.value[0]);
	d.endTime = formatDate(affectTimeRange.value[1]);
	d.stepCodes = stepCodes.value;
	affectSystemDownLoad(d).then((res) => {
		downloadFromBlob(
			res,
			'',
			exportParams.alarmIndicatorName + '分析 - 影响系统 ' + d.startTime.replace(/\D/g, '') + '-' + d.endTime.replace(/\D/g, '') + '.xlsx'
		).then((o) => {
			exportLoading.affSys = false;
			if (!o.flag) {
				proxy.$modal.msgWarning(o.msg);
			}
		});
	});
}
// 影响业务
function handleBusiExport() {
	exportLoading.affBusi = true;
	getExportParams();
	let d = JSON.parse(JSON.stringify(queryDataInfo.value));
	d.startTime = formatDate(affectTimeRange.value[0]);
	d.endTime = formatDate(affectTimeRange.value[1]);
	d.stepCodes = stepCodes.value;
	affectBusinessDownLoad(d).then((res) => {
		downloadFromBlob(
			res,
			'',
			exportParams.alarmIndicatorName + '分析 - 影响业务 ' + d.startTime.replace(/\D/g, '') + '-' + d.endTime.replace(/\D/g, '') + '.xlsx'
		).then((o) => {
			exportLoading.affBusi = false;
			if (!o.flag) {
				proxy.$modal.msgWarning(o.msg);
			}
		});
	});
}
</script>

<style rel="stylesheet/scss" lang="scss">
@import '/src/styles/ops-workbench/common.scss';
@import '/src/styles/ops-workbench/yd-table.scss';
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
@mixin box-back {
	background-color: #2a507d;
	border-radius: 10px;
}
.toggle-button {
	color: #ffffff;
	font-size: 15px;
	text-align: center;
	padding: 5px;
	background: none;
	border: none;
	&:hover {
		border: 1px solid #2abcca;
	}
}
.active-button {
	border: 1px solid #2abcca;
	background: #2abcca;
	background: -moz-linear-gradient(top, rgba(43, 237, 237, 0.1) 0%, rgba(43, 237, 237, 0.5) 100%);
	background: -webkit-linear-gradient(top, rgba(43, 237, 237, 0.1) 0%, rgba(43, 237, 237, 0.5) 100%);
	background: linear-gradient(top, rgba(43, 237, 237, 0.1) 0%, rgba(43, 237, 237, 0.5) 100%);
}
.table-title {
	height: 40px;
	width: 100%;
	font-size: 15px;
	padding-left: 10px;
	display: flex;
	align-items: center;
	.table-export-btn {
		flex: 1;
		text-align: right;
		margin-right: 20px;
	}
}
.ywgzt-container {
	width: 100%;
	min-height: calc(100vh) !important;
	.alarm-chart-box {
		height: 280px;
		width: 100%;
		.chart-button-box {
			height: 14%;
			width: 100%;
			display: flex;
			align-items: center;
		}
		.alarm-line {
			height: 86%;
			width: 100%;
			@include box-back;
		}
	}
	.overview-box {
		width: 100%;
		margin-top: 12px;
		padding: 15px 40px;
		border: 2px solid #2beded;
		display: flex;
		flex-wrap: wrap;
		.overview-item {
			flex: 0 1 25%;
			margin-bottom: 15px;
		}
		.overview-value {
			font-size: 14px;
			font-weight: bold;
			color: #2beded;
		}
	}
	.content-c {
		/*滚动条*/
		::-webkit-scrollbar {
			width: 8px;
		}
		/*滚动条-轨道*/
		::-webkit-scrollbar-track {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
			background-color: rgba(28, 43, 93, 0.81);
		}
		/*滚动条-滑块*/
		::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
			background-color: rgba(14, 171, 180, 0.3);
		}
		width: 100%;
		margin-top: 12px;
		display: flex;
		.c-table-box {
			width: 60%;
			.analysis-table {
				@include box-back;
				height: 330px;
				margin-bottom: 10px;
				overflow-y: auto;
				scrollbar-width: 8px;
				scrollbar-color: rgba(255, 255, 255, 0.2) rgba(28, 43, 93, 0.81);
			}
			.statistics-table {
				@include box-back;
				height: 355px;
				margin-bottom: 10px;
				overflow-y: auto;
				scrollbar-width: 8px;
				scrollbar-color: rgba(255, 255, 255, 0.2) rgba(28, 43, 93, 0.81);
			}
		}
		.c-map-box {
			width: 40%;
			height: 700px;
			padding: 0 10px;
			.map-button-box {
				height: 35px;
				width: 100%;
				display: flex;
				align-items: center;
			}
			.map-chart {
				height: 620px;
				width: 100%;
			}
		}
	}
	.affect-user-box {
		@include box-back;
		margin-bottom: 10px;
	}
	.associate-analysis-box {
		.analysis-title {
			font-size: 15px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.analysis-time-box {
			height: 30px;
			margin-bottom: 6px;
			.analysis-time-label {
				font-size: 14px;
				margin-right: 8px;
			}
			.date-picker {
				margin: 0 10px;
				height: 26px;
				background-color: rgba(255, 255, 255, 0.1);
				border: none;
				:deep(.el-range-input) {
					background-color: rgba(255, 255, 255, 0);
					color: #ffffff;
				}
				:deep(.el-range-separator) {
					color: #ffffff;
				}
			}
		}
		.analysis-table-box {
			display: flex;
			.mr-10 {
				margin-right: 10px;
			}
			.affect-table-box {
				width: 50%;
				@include box-back;
			}
		}
	}
}
.active-domain {
	width: 100px;
	padding: 5px;
	margin-right: 8px;
	color: #ffffff;
	background-color: #1c2b5d;
	border-radius: 5px;
}
.unActive-domain {
	width: 100px;
	padding: 5px;
	margin-right: 8px;
	color: #cacad1;
	background-color: #626c88;
	border-radius: 5px;
}
.icon-cls {
	width: 20px;
	height: 20px;
	color: #00ffff;
}
</style>
